<template>
  <div class="header">
    <q-toolbar class="bg-purple text-white toolbar_custom" >
      <q-toolbar-title>
        <q-img
            src="@/assets/logo.jpg"
            spinner-color="white"
            style="height: 37px; max-width: 37px"
        />
      </q-toolbar-title>
      <q-btn-dropdown ref="dropdownRefs" stretch flat :label="langList[appStore.userInfo.lang]" class="q-mr-sm"
                      :content-style="{borderRadius:'12px'}">
        <div class="list">
          <div @click="changeLang(index)" v-for="(item,index) in langList" class="item"
               :class="index === appStore.userInfo.lang? 'text-pink-600' : ''" :key="index">
            {{ item }}
          </div>
        </div>
      </q-btn-dropdown>
      <q-btn v-show="!appStore.isLogin" class="" rounded color="pink" :label="t('login/register')" />
      <q-btn v-show="appStore.isLogin" round color="blue" size="sm" class="mr-1"  icon="local_grocery_store" />
      <q-btn v-show="appStore.isLogin" round color="blue" size="sm" icon="person" />
    </q-toolbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref }  from 'vue';
import { useAppStore } from "@/stores/app.ts";
import { useI18n } from 'vue-i18n'

// use global scope

export default defineComponent ({
  setup() {
    const { t } = useI18n({
      inheritLocale: true
    })
    const dropdownRefs = ref()
    const langList = {
      en: 'ENG',
      zh_cn: '简体',
      zh_hk: '繁體',
    }
    const appStore = useAppStore()
    return {
      langList, appStore, dropdownRefs, t
    }
  },
  methods: {
    changeLang(index:string) {
      this.appStore.$patch({
        userInfo: {
          lang: index
        }
      })
      this.$i18n.locale = index
      this.dropdownRefs.toggle()
    }
  }
})

</script>
<style lang="scss" scoped>
.header {
  @apply sticky;
  @apply top-0;
  .toolbar_custom {
    height: 110px;
  }
}

.list {
  background: #fff;
  font-size: 32px;
  font-weight: 300;
  line-height: 32px;
  color: #707070;

  .item {
    padding: 34px;
    border-bottom: 2px solid #D9D9D9;
    font-weight: 500;
  }

  .item:last-child {
    border-bottom: none;
  }
}
</style>
